<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Article Editor</title>
</head>
<body>
<form   name="frm" id="frm" onsubmit="return onSubmit()">
  <div>Store: <select name="store" id="store" ></select></div>
  <input name="articleTitle" id=articleTitle placeholder="Article Title" size="100"/></br>
  <input name="articleURL" id="articleURL"  placeholder="Article URL" size="80"/></br>
  <input name="domain" id="domain" placeholder="Domain"  size="40"/></br>
  <input name="icon" id="icon"  placeholder="Icon URL"  size="50"/></br>
  <input name="image" id="image"  placeholder="Image URL"  size="50"/></br>
  <input name="keyfield" id="keyfield" /></br>
  <input type="submit" value="submit" class="submit"  />
  <input type="reset" value="reset" />
  
</form>

 <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>
</body>
<script src="js/jquery-1.4.2.js" ></script> 
<script type="text/javascript">
var key;

$(document).ready(function(){
	console.log("Hello JQuery");
	$.ajax({
		  url: "getSimpleStoreList.php",
		  context: document.body,
		  success: function( json ) {
		      //$( "#result" ).empty().append( json );
		      
		      var ar = eval(json);
		      for(var i=0;i<ar.length;i++){
		    	  var opt = document.createElement('option');
		    	  opt.text = ar[i].name;
		    	  opt.value = ar[i].storeId;
		    	  try {
		    		  document.getElementById('store').add(opt, null); // standards compliant; doesn't work in IE
		    	  } catch(ex) {
		    		  document.getElementById('store')(opt); // IE only
		    	  }
		    	 
	        }
			  
			  }
		});
	
	$.ajax({
	      url: "getKey.php",
	      context: document.body,
	      success: function( json ) {
	          //$( "#result" ).empty().append( json );
	          
	    	  $("#keyfield").val( json );
	    	  //$( "#result" ).empty().append( json );
	        
	        }
	    });
	
});


function onSubmit() {
	
	console.log("Hello Form Post");
	var $inputs = $('#myForm :input');
	var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });
	$.ajax({
		  type: "POST",
		  url: "saveForm.php",
		  data: {
			  keyfield: $(keyfield).val(),
			  store: $(store).val(), 
			  articleTitle: $(articleTitle).val(),
			  articleURL: $(articleURL).val(),
		    domain: $(domain).val(),
		    icon: $(icon).val(),
		    image: $(image).val()
		  },
		  success: function( json ) {
			  console.log(json);
	         $( "#result" ).empty().append( json );
	          
	          }
	});
	return false;
	
}





</script>

</html>